import React,{Component} from 'react'
import {connect} from 'react-redux';
import {ListItem,Loadmore} from '../style'
import {loadMoreAction} from '../../../store/actionCreator'
import {Link} from 'react-router-dom'
class List extends Component{
    constructor(){
        super();
    }
    render(){
        return(
            <React.Fragment>
                
                    {
                        this.props.contentList.map((item,index)=>{
                            return(
                                <Link to='/detail' style={{textDecoration:'none',color:'#333'}}>
                                <ListItem key={index}>
                                <img className='img-list' src={item.get('src')}></img>
                                <h3 className='title'>{item.get('title')}</h3>
                                <p className='content'>{item.get('content')}</p>
                </ListItem>
                </Link>
                            )
                        })
                    }
                    <Loadmore onClick={this.props.loadMore}>加载更多</Loadmore>
            </React.Fragment>
        )
     }
}
const mapStateToProps = (state)=>{
    return{
        contentList:state.get('home').get('contentList'),
    }
}
const mapDispatchToProps = (dispatch)=>{
    return{
        loadMore(){
            var action = loadMoreAction();
            dispatch(action);
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(List);